<template>
	<sl-page :safeBottom="false">
		<swiper class="swiper-box" :style="{height: swiperHeight}" @change="change" :current="swiperDotIndex">
			<swiper-item class="swiper-box__item" v-for="(item, index) in members" :key="index">
				<view class="member">
					<view class="member-head">
						<view class="head-image">
							<sl-image :value="item.image"></sl-image>
						</view>
						<view class="head-content">
							<view class="head-profile">
								<view class="profile-headimg" v-if="headimg">
									<sl-image :value="headimg"></sl-image>
								</view>
								<view class="profile-avatar" v-else>
									<sl-image :value="avatar"></sl-image>
								</view>
							</view>
							<view class="flex-column px-1">
								<view class="head-name">
									<block v-if="memberName"> {{memberName}}</block>
									<block v-else>会员名称</block>
								</view>
								<view class=""> 升级规则 ></view>
							</view>
						</view>
					</view>
					<view class="member-body">
						<view class="body-left"></view>
						<view class="body-center">
							<view class="center-top flex-middle-center" v-if="member && member.vipId === item.id">
								<image src="@/static/svg/icon-vip-yes.svg"></image>
								<text>当前等级</text>
							</view>
							<view class="center-hg">
								<sl-image :value="item.icon"></sl-image>
							</view>
							<view class="center-name">
								<view class="f-46 f-w italic" :style="'color:' + item.style">{{item.name}}</view>
								<view class="py-1">在获得{{growthDifference(item)}}成长值可升级</view>
							</view>
							<view class="center-point">
								<view class="point-name">成长值 {{memberGrowth}} / {{item.growth}}</view>
								<view class="point-schedule flex-middle-center">
									<view class="point-schedule__bar">
										<view class="-data" :style="''+  growthRateStyle(item)"></view>
									</view>
								</view>
								<view class="point-date"> 截止 {{memberPeriod}} </view>
							</view>
							<view class="flex flex-x-center">
								<view class="bottom-line"></view>
							</view>
							<view class="flex-column flex-y-center">
								<view class="py-b-1 f-w">等级权益</view>
								<view class="center-box-one">
									<view class="f-w">升级奖励</view>
									<view class="flex flex-x-center flex-x-around">
										<view :class="[item.giveGrowthFlag == '1' ? '' : 'rights']">
											<image class="custom-icon iconfont-size-big p-1"
												src="@/xj_user/static/icon-chengchangzhijiangli1.svg"></image>
											<view class="f-20">成长值奖励</view>
										</view>
										<view :class="[item.growthRateFlag == '1' ? '' : 'rights']">
											<image class="custom-icon iconfont-size-big p-1"
												src="@/xj_user/static/icon-chengchangzhibeishuai1.svg"></image>
											<view class="f-20">成长值倍率</view>
										</view>
									</view>
								</view>
								<view class="center-box-two">
									<view class="f-w">会员礼包</view>
									<view class="flex flex-x-center flex-x-around">
										<view :class="[item.couponFlag == '1' ? '' : 'rights']">
											<image class="custom-icon iconfont-size-big p-1" src="@/xj_user/static/icon-youhuiquan1.svg" />
											<view class="f-20">优惠券</view>
										</view>
										<view :class="[item.discountFlag == '1' ? '' : 'rights']">
											<image class="custom-icon iconfont-size-big p-1" src="@/xj_user/static/icon-xiadandazhe1.svg" />
											<view class="f-20">下单打折</view>
										</view>
										<view :class="[item.postageFlag == '1' ? '' : 'rights']">
											<image class="custom-icon iconfont-size-big p-1" src="@/xj_user/static/icon-xiadanbaoyou1.svg" />
											<view class="f-20">下单包邮</view>
										</view>
									</view>
								</view>
								<view class="center-box-three">
									<view class="f-w">积分权益</view>
									<view class="flex flex-x-center flex-x-around">
										<view class="rights">
											<image class="custom-icon iconfont-size-big p-1" src="@/xj_user/static/icon-songjifen1.svg" />
											<view class="f-20">赠送积分</view>
										</view>
										<view class="rights">
											<image class="custom-icon iconfont-size-big p-1" src="@/xj_user/static/icon-jifenbeishuai1.svg" />
											<view class="f-20">积分倍率</view>
										</view>
									</view>
									<view class="flex flex-x-center flex-x-around">
										<view class="rights">
											<image class="custom-icon iconfont-size-big p-1"
												src="@/xj_user/static/icon-huiyuanshuangbeijifen1.svg" />
											<view class="f-20">会员日双倍</view>
										</view>
										<view class="rights">
											<image class="custom-icon iconfont-size-big p-1"
												src="@/xj_user/static/icon-shengrishuangbeijifen1.svg" />
											<view class="f-20">生日双倍</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="body-right"></view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<sl-flooter v-if="select && select.id">
			<view class="btn-primary" @click="onSubmitOrder(select)">{{select.price | Money }} 付费升级</view>
		</sl-flooter>
	</sl-page>
</template>

<script>
	import MemberApi from '@/api/member/member.js';
	import vipOrderApi from '@/api/order/vipOrder.js';
	import ShopOrderApi from '@/api/order/shopOrder.js';
	import Constants from '@/constants';
	import Member from '@/xj_user/member/components/member.vue';

	export default {
		//
		name: 'member',
		//
		mixins: [Constants],
		//
		components: {},
		//
		data() {
			return {
				headimg: '',
				memberName: '',
				member: {},
				members: [],
				current: 0,
				select: {},
				swiperDotIndex: 0,
				// 状态栏的高度
				statusBarHeight: 0,
				// 自定义导航栏的高度
				customBarHeight: 0,
				// 底部的高度
			};
		},
		// 
		computed: {
			memberGrowth: function() {
				return this.member ? (this.member.growth || 0) : 0
			},
			memberPeriod: function() {
				return this.member ? (this.member.endTime) : ''
			},
			swiperHeight: function() {
				return 'calc(110vh)';
				//return 'calc(100vh ' + (' - ' + this.statusBarHeight + 'px') +
				//	(' - ' + this.customBarHeight + 'px') +
				//	('+ 160px') + ')';
			},
		},
		watch: {
			current: function() {
				this.select = this.members[this.current];
				console.log('当前选择的会员：', this.select.name, this.select.price)
			},
			members: function() {
				this.swiperDotIndex = this.member && this.member.vipId ? this.members.findIndex(m => m.id === this.member
					.vipId) || 0 : 0;
				this.current = this.swiperDotIndex;
			},
		},
		onLoad({
			headimg,
			memberName
		}) {
			this.headimg = headimg !== undefined ? headimg : this.headimg;
			this.memberName = memberName !== undefined ? memberName : this.memberName;
			this.load();
		},
		//
		methods: {
			growthDifference: function(item) {
				let memberGrowth = this.member ? (this.member.growth || 0) : 0;
				let vipGrowth = item.growth || 0;
				return vipGrowth > memberGrowth ? vipGrowth - memberGrowth :
					0;
			},
			growthRateStyle: function(item) {
				let memberGrowth = this.member ? (this.member.growth || 0) : 0;
				let vipGrowth = item.growth;
				let rate = vipGrowth <= 0 ? 100 : (memberGrowth / vipGrowth * 100).toFixed(0);
				return 'width:' + rate + '%;';
			},
			load: async function() {
				await this.updateNavBarInfo();
				await this.loadMember();
				await this.loadMembers();
			},
			// 加载状态栏的高度
			async updateNavBarInfo() {
				// 获取vuex中的自定义顶栏的高度
				let customBarHeight = this.$settings.statusBarHeight;
				let statusBarHeight = this.$settings.customBarHeight;
				if (!customBarHeight) {
					let navBarInfo = await this.$app.updateCustomBar();
					customBarHeight = navBarInfo.customBarHeight
					statusBarHeight = navBarInfo.statusBarHeight
				}
				this.customBarHeight = customBarHeight
				this.statusBarHeight = statusBarHeight
			},
			// 我的会员
			loadMember: async function() {
				const res = await MemberApi.get();
				this.member = res.obj || {};
				console.log("我的会员", this.member)
			},
			//加载订单（个人）
			loadMembers: async function() {
				const res = await MemberApi.buyables();
				this.members = res.obj;
			},
			change(e) {
				this.current = e.detail.current
				console.log('选择：', this.current);
			},
			//
			async onSubmitOrder(data) {
				await vipOrderApi.buy({
					productId: data.id,
					quantity: 1
				});
				await vipOrderApi.confirm();

				ShopOrderApi.book()
					.then(result => {
						if (!result.success) {
							this.$app.error(result.msg);
							return;
						}
						//todo，如果amount等于0，应该跳转到订单结果页面
						this.$app.navTo(this.pages.checkoutPayPage + '?orderId=' + result.obj.orderId);
					}).catch(err => {
						// this.$app.toast('下单错误，请重试！');
						// this.disabled = false;
						console.error('【checkoutIndexon:onSubmitOrder】:', err)
					});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.swiper-box {
		position: relative;
		z-index: 1;
		overflow: hidden;
		height: 120vh;
		// flex: 1; // 注意方式在真机上会导致swiper-box__item 高度为 0

		.swiper-box__item {
			z-index: 1;
			top: 0;
			bottom: 0;
			overflow: hidden;
		}
	}

	.custom-icon {
		height: 55rpx;
		width: 55rpx;
	}

	.rights {
		opacity: 0.3;
	}

	.member {
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;
		overflow: hidden;
		overflow-y: auto;
		position: relative;
		z-index: 1;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;

		.member-head {
			position: relative;
			z-index: 1;

			.head-image {
				display: flex;
				width: 100%;
				height: 380rpx;
				position: relative;
			}

			.head-profile {
				position: relative;
				display: flex;
				width: 104rpx;
				height: 104rpx;
				justify-content: center;
				align-items: center;
				border-radius: 10%;
				overflow: hidden;
				border: 2rpx solid #CCCCCC;
				background-color: #FFFFFF;

				.profile-headimg {
					position: relative;
					width: 104rpx;
					height: 104rpx;
				}

				.profile-avatar {
					position: relative;
					width: 72rpx;
					height: 60rpx;
					opacity: 0.3;
				}
			}

			.head-name {
				margin-bottom: 18rpx;
			}

			.head-content {
				display: flex;
				color: white;
				position: relative;
				top: -260rpx;
				margin-left: 60rpx;
			}
		}

		.member-body {
			display: flex;
			justify-content: space-between;
			//width: 100%;
			//height: 1100rpx;
			position: relative;
			top: -185rpx;
			z-index: 2;
			margin-bottom: -160rpx;

			.body-left {
				flex-basis: 3%;
				background-color: white;
			}

			.body-right {
				flex-basis: 3%;
				background-color: white
			}

			.body-center {
				flex-basis: 84%;
				background-color: white;
				position: relative;
				align-items: center;
				padding-bottom: 28rpx;

				.center-top {
					position: absolute;
					right: 0;
					top: -48rpx;
					width: 156rpx;
					height: 48rpx;

					image {
						display: block;
						width: 156rpx;
						height: 48rpx;
						position: absolute;
						left: 0;
						right: 0;
					}

					text {
						position: relative;
						color: #666;
					}
				}

				.center-hg {
					position: absolute;
					width: 122rpx;
					height: 104rpx;
					top: 46rpx;
					left: 444rpx;
				}

				.center-name {
					display: flex;
					flex-direction: column;
					margin-top: 46rpx;
					margin-left: 34rpx;
					color: #999;
					font-size: 12px;
					line-height: 20px;
				}

				.center-point {
					display: flex;
					justify-content: space-around;
					margin-top: 64rpx;
					position: relative;

					.point-name {
						color: #F7441D;
						font-size: 12px;
						line-height: 20px;
						position: absolute;
						left: 30rpx;
						top: -40rpx;
					}

					.point-schedule {

						.point-schedule__bar {
							width: 364rpx;
							height: 8rpx;
							border-radius: 8px;
							background: #E9E9E9;
							position: relative;

							.-data {
								position: absolute;
								left: 0;
								top: 0;
								height: 8rpx;
								background: linear-gradient(270deg, #FF5942 0%, #FFC267 105.71%);
							}
						}
					}

					.point-date {
						color: #999;
						font-size: 10px;
						line-height: 20px;
					}
				}

				.center-box-one {
					width: 558rpx;
					height: 190rpx;
					flex-shrink: 0;
					background: #F6F6F6;
					text-align: center;
					padding-top: 20rpx;
					font-size: 12px;
				}

				.center-box-two {
					width: 558rpx;
					height: 190rpx;
					flex-shrink: 0;
					background: #F3F3F3;
					margin-top: 10rpx;
					text-align: center;
					padding-top: 20rpx;
					// font-size: 12px;
				}

				.center-box-three {
					width: 558rpx;
					height: 316rpx;
					flex-shrink: 0;
					background: #F3F3F3;
					margin-top: 10rpx;
					text-align: center;
					padding: 30rpx 0px;

					// font-size: 12px;
				}
			}
		}

		.sl_image {
			position: absolute;
			width: 100%;
			height: 100%;
			max-width: 100%;
			max-height: 100%;
			top: 0;
			left: 0;
		}

		.head-top {
			position: absolute;
			top: 80rpx;
			left: 88rpx;
		}
	}
</style>